<template>
	<van-tabbar v-model="selectValue" @change="handleMenuClick" fixed placeholder>
		<template v-for="item in menus" :key="item.name">
			<van-tabbar-item
				v-if="!item.hidden"
				:class="item.itemSysCss"
				:name="item.name"
				v-bind="getDynaProps(item)"
			>
				<template #icon>
					<AppIcon
						:iconClass="item.iconClass"
						:imgPath="item.imgPath"
						:fontIconClass="item.fontIconClass"
					></AppIcon>
				</template>
				{{ item.caption }}
			</van-tabbar-item>
		</template>
	</van-tabbar>
</template>
<script setup lang="ts">
import { Ref } from 'vue';
import { menuProps } from '../app-menu';
const props = defineProps(menuProps);
const emit = defineEmits(['menuClick']);
const selectValue: Ref<string> = ref('');
watch(
	() => props.selectionName,
	() => {
		selectValue.value = props.selectionName;
	},
	{ immediate: true }
);
const handleMenuClick = (key: string): void => {
	emit('menuClick', key);
};

const getDynaProps = (item: any) => {
	return item.counterId ? { badge: props.counterData[item.counterId] } : null;
};
</script>
